<!-- Bootstrap -->
<link href="/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">

<!-- page content -->
<div id="modulesDiv" class="right_col" role="main">
	<div class="">
		<div class="page-title">
			<div class="title_left">
				<h3>
					roles page
				</h3>
			</div>
		</div>

		<div class="clearfix"></div>

		<div class="row">
			<div class="col-md-12 col-sm-12 ">
				<div class="x_panel">
					<div class="x_title">
						<button class="btn btn-primary" type="button" @click="initModuleAdd()"
								data-toggle="modal" data-target="#addModal">新增</button>
						<ul class="nav navbar-right panel_toolbox">
							<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
							</li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
								   aria-expanded="false"><i class="fa fa-wrench"></i></a>
								<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
									<a class="dropdown-item" href="#">Settings 1</a>
									<a class="dropdown-item" href="#">Settings 2</a>
								</div>
							</li>
							<li><a class="close-link"><i class="fa fa-close"></i></a>
							</li>
						</ul>
						<div class="clearfix"></div>
					</div>
					<div class="x_content">
						<div class="row">
							<div class="col-sm-12">
								<div class="card-box table-responsive">
									<table id="moduleTable" class="table table-striped table-bordered" style="width:100%">
										<thead>
										<tr>
											<th>ID</th>
											<th>name</th>
											<th>Create Date</th>
											<th>Operation</th>
										</tr>
										</thead>
										<tbody></tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- role add page & role edit page !-->
	<div th:replace="account/roleAdd"></div>
	<div th:replace="account/roleEdit"></div>
</div>
<!-- /page content -->

<!-- Datatables -->
<script src="../vendors/datatables.net/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="../vendors/datatables.net-bs/js/dataTables.bootstrap.min.js" type="text/javascript"></script>

<script type="text/javascript">
	var modulesVue = new Vue({
		el: "#modulesDiv",
		data: {
			pageSize: 5,
			modulesTable: {},
			role: {
				id: "",
				name: "",
			},
		},
		methods: {
			RowData: function (id, name, createDate) {
				var row = {};
				row.id = id;
				row.name = name;
				row.createDate = createDate;
				row.operate = function () {
					return "<a href='#' class='btn_editcolor' data-toggle='modal' data-target='#editModal' " +
							"onclick='initEditModal(\"" + id + "\")'>编辑</a>&nbsp;" +
							"<a href='javascript:void(0);' onclick='deleteModule(\"" + id +
							"\")' class='btn_editcolor'>删除</a>";
				}
				return row;
			},
			initTable: function (pageSize) {
				var self = this;
				self.modulesTable = $('#moduleTable').DataTable({
					'paging': true, //分页
					"serverSide": true, //开启后端分页
					"pagingType": "full_numbers", //分页样式的类型simple/simple_numbers/full/full_numbers
					"pageLength": pageSize, //定义初始的页长
					"processing": true,
					"destroy": true, //允许销毁替换，在表格重新查询时，可以自动销毁以前的data
					'lengthChange': true, //控制是否能够调整每页的条数
					'lengthMenu': [3, 5, 10, 25, 50],
					'searching': true,
					'data-show-refresh': true,
					'ordering': true,
					'autoWidth': true,
					"ajax": function (data, callback, settings) {
						// 从data获取查询数据
						var columIndex = data.order[0].column;
						var direction = data.order[0].dir;
						var orderBy = data.columns[columIndex].name;
						pageSize = data.length == undefined  ? pageSize : data.length;

						var searchBean = {};
						searchBean.pageNumber = (data.start / pageSize) + 1;
						searchBean.pageSize = pageSize;
						searchBean.orderBy = orderBy;
						searchBean.direction = direction;
						searchBean.keyword = data.search.value;

						$.ajax({
							url : "/api/roles",
							type : "post",
							contentType: "application/json",
							data : JSON.stringify(searchBean),
							success : function (rs) {
								// 定义表格数据结构
								var tableData = {
									draw :0,
									recordsTotal: 0,
									recordsFiltered: 0,
									data: []
								};
								if (!rs) {
									layer.alert("请求出错，请稍后重试" + rs.errmsg, {icon: 2});
									callback(tableData);
									return;
								};
								if (rs.list == null) {
									$('#moduleTable tbody tr').remove();
									$('#loading').remove();
									callback(tableData);
									return;
								}
								$('#loading').remove();
								var rowsData = [];
								for (var i = 0; i < rs.list.length; i++) {
									//包装行数据
									var rowData = self.RowData(rs.list[i].id, rs.list[i].name,
											rs.list[i].createDate);
									// 将行数据放到数组里
									rowsData.push(rowData);
								}
								tableData.data = rowsData;
								tableData.recordsTotal = rs.total;
								tableData.recordsFiltered = rs.total;
								callback(tableData);
							},
							error : function (data) {
								layer.alert(data.responseText, {icon: 0});
							}
						});
					},
					"columns": [ //定义行数据字段
						{data: 'id', name: "id", sortable: true},
						{data: 'name', name: "name", sortable: true},
						{data: 'createDate', name: "create_date", sortable: true},
						{data: 'operate', width: '80px', sortable: false}
					]
				});
			},
			initRoles: function() {
				var self = this;
				$.ajax({
					url : "/api/roles",
					type : "get",
					success : function (rs) {
						self.allRoles = rs;
					},
					error : function (rs) {
						layer.alert(rs.responseText, {icon: 0});
					}
				});
			},
			initModuleAdd: function () {
				this.role = {
					id: "",
					name: "",
				}
			},
			insertModule: function () {
				var self = this;

				$.ajax({
					url : "/api/role",
					type : "post",
					contentType: "application/json",
					data : JSON.stringify(self.role),
					success : function (rs) {
						if (rs.status == 200) {
							self.initTable(self.pageSize);
						} else {
							layer.alert(rs.message, {icon: 0});
						}
					},
					error : function (rs) {
						layer.alert(rs.responseText, {icon: 0});
					}
				});
			},
			initEditModal: function (id) {
				var self = this;
				$.ajax({
					url : "/api/role/" + id,
					type : "get",
					success : function (rs) {
						self.role = rs;
					},
					error : function (rs) {
						layer.alert(rs.responseText, {icon: 0});
					}
				});
			},
			updateModule: function () {
				var self = this;
				$.ajax({
					url : "/api/role",
					type : "put",
					contentType: "application/json",
					data : JSON.stringify(self.role),
					success : function (rs) {
						if (rs.status == 200) {
							self.initTable(self.pageSize);
						} else {
							layer.alert(rs.message, {icon: 0});
						}
					},
					error : function (rs) {
						layer.alert(rs.responseText, {icon: 0});
					}
				});
			},
			deleteModule: function (id) {
				var self = this;
				bootbox.confirm({
					message: "确认删除？",
					callback: function(result){
						if (result) {
							$.ajax({
								url : "/api/role/" + id,
								type : "delete",
								success : function (rs) {
									if (rs.status == 200) {
										self.initTable(self.pageSize);
									} else {
										layer.alert(rs.message, {icon: 0});
									}
								},
								error : function (rs) {
									layer.alert(rs.responseText, {icon: 0});
								}
							});
						}
					}
				})
			}
		},
		created: function () {
			window.initEditModal = this.initEditModal;
			window.deleteModule = this.deleteModule;
		},
		mounted: function () {
			this.initTable(this.pageSize);
			this.initRoles();
		}
	});

</script>
